<!--办公电话列表-->
<template>
  <div class="officephoneList">
    <form action="/">
      <van-search
        v-model="searchValue"
        placeholder="请输入电话号码、使用者"
        show-action
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-cell
      :title="item.name"
      v-for="(item,idx) in organization"
      :key="idx"
      is-link
      @click="linkOfficephoneList(item)"
    />
    <van-collapse v-model="activeNames" accordion>
      <van-collapse-item
        style="margin-top:10px"
        v-for="(item,index) in list"
        :title="item.name"
        :name="index"
        :key="index"
      >
        <p>
          <van-icon name="phone-o" />
          {{item.phone}}
          <a class="dial-number" :href="'tel://'+item.phone">拨打号码</a>
        </p>
        <p style="margin-top:5px;">
          <van-icon name="location-o" />
          {{item.xiaoqu}}
        </p>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script>
import { Collapse, CollapseItem, Search } from "vant";
export default {
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Search.name]: Search
  },
  data() {
    return {
      organization: [
        {
          id: "001",
          name: "学工1处"
        },
        {
          id: "001",
          name: "学工2处"
        },
        {
          id: "001",
          name: "学工3处"
        }
      ],
      list: [
        {
          name: "楚留香",
          xiaoqu: "大兴校区",
          phone: "13556894562"
        },
        {
          name: "李思思",
          xiaoqu: "大兴校区",
          phone: "13556894562"
        },
        {
          name: "花满楼",
          xiaoqu: "大兴校区",
          phone: "13556894562"
        }
      ],
      activeNames: ["1"],
      searchValue: ""
    };
  },
  methods: {
    // 查询
    onSearch() {
      console.log(this.searchValue);
    },
    //取消查询
    onCancel() {
      this.searchValue = "";
    }
  }
};
</script>
<style lang="less" scoped>
.officephoneList {
  background-color: #e5e5e7;
  height: 100%;
  overflow-y: auto;
  .dial-number {
    display: inline-block;
    float: right;
    color: #6A4781
  }
}
</style>